<template>
	<view  :class="currentTheme">
		<a-nabbar :name="`${option.issueModeName}编辑`" @getNavHeight="getNavHeight"/>
		<view class="u-position-fixed add-city-search-box">
			<view class="u-padding-left-32 u-padding-right-32 u-padding-top-20">
				 <item-search ref="search" placeholder="搜索城市" @change="setDown" v-model="searchName"></item-search>
			</view>
			<view class="u-padding-20 u-font-26 text-order-time u-text-center">点击下列标签编辑</view>
		</view>
		<view class="u-padding-32">
			<view class="fixed-top-empty">
				<index-list :scrollTop="scrollTop" :sticky="false" active-color="white" :activeBgColor="currentThemeObj.primary" 
				v-if="pageCityList.length"  :indexList="indexLetterList" :headerContentHeight="headerContentHeight">
					<view v-for="(item, index) in pageCityList" :key="index">
						<u-index-anchor :index="item.py" 
						:custom-style="{
							backgroundColor:'white',
							borderRadius:'26rpx 26rpx 0 0',
							borderBottom:'1rpx solid rgba(0,0,0,0.1)',
							lineHeight:'1',
							paddingLeft:'20rpx'
						}"/>
						<view class="u-padding-top-20 bg-white u-margin-bottom-20">
							<u-row>
								<u-col span="4" v-for="(c,i) in item.list" :key="i">
									<view class="u-margin-bottom-28 u-flex u-row-center">
										<cityBtn isEdit isPlain width="225rpx" :showDelete="false" :item="c" @select="select"></cityBtn>
									</view>
								</u-col>
							</u-row>
						</view>
					</view>
					<view style="height: 100rpx;"></view>
				</index-list>
				<empty v-else></empty>
			</view>
		</view>
		<fixed-team>
			<view class="u-flex-1">
				<view class="u-flex u-row-between">
					<!-- <item-btn type="plain" width="323" height="88" @click="removeAll">一键删除</item-btn> -->
					<view>
						<item-btn width="323" height="88" type="plain"  @click="saveAll">保存修改</item-btn>
					</view>
					<view>
						<item-btn width="323" height="88" @click="showPop">新增城市</item-btn>
					</view>
				</view>
				<view @click="removeAll" class="u-text-center u-padding-top-32 text-color-txtTheme">一键删除</view>
			</view>
		</fixed-team>
		<edit-modal :show="addFlag" @close="close" :isCityEdit="isCityEdit"  v-model="activeForm" @remove="removeListItem" @confirm="saveItemCity" isCity/>
	</view>
</template>

<script>
	// tips：城市可选择三级城市中的某一级城市 且父子级城市可共存 如 四川省 可和成都市共存  
	import cityBtn from './button.vue'
	import {add,getList,update,deleteIds} from '@/api/crud.js'
	import itemSearch from '@/components/itemSearch/itemSearch.vue'
	import indexList from "@/components/u-index-list/u-index-list.vue"
	import editModal from './addCityPop/index.vue'
	import addCity from './addCity.js'
	import empty from '@/components/mescroll-uni/components/mescroll-empty.vue'
	import {editProductRelCity,editProductTempCity} from '@/api/city.js'
	export default {
		mixins:[addCity],
		components: {
			cityBtn,itemSearch,indexList,editModal,empty
		},
		data() {
			return {
				activeForm:{totalNumber:'',grantNumber:'',address:'',productTempId:''},
				citySelectList:[],
				apiModule:'shopApi',
				option:{},
				scrollTop:0,
				searchName:'',
				timer:null,
				pageCityList:[],
				isCityEdit:false,
				isCityListGroup:true,
				navHeight:{
					navbarHeight:44,
					statusBarHeight:0
				}
			};
		},
		computed: {
			editFlag() {
				return this.option.istemp==0
			},
			apiType(){
				return this.editFlag ? "product" : 'storeProductTemp'
			},
			name(){
				return this.editFlag ? 'getWaitUpdateCitys' : 'getCitys';
			},
			indexLetterList(){
				return this.pageCityList.map(val=>val.py)
			},
			// 92 是搜索框的宽度 navHeight是获取的navbar的高度和导航栏高度
			headerContentHeight(){
				return 92 + this.navHeight.navbarHeight+this.navHeight.statusBarHeight
			}
		},
		onLoad(option) {
			this.option = option;
			this.getList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			//获取navbar的高度和导航栏的高度
			getNavHeight(res){
				this.navHeight = res;
			},
			
			//获取 查
			getList(){
				getList({
					productTempId:this.option.productTempId,
					productId:this.option.productId,
					...this.option,
					isLetterSort:true
				},this.apiType,this.apiModule,this.name).then(res=>{
					this.citySelectList = res //维护数据
					this.setPageCityList()
				})
			},
			// 搜索 使用源数据citySelectList来做本地检索
			setDown(){
				const query = this.searchName;
				const list = this.$u.deepClone(this.citySelectList)
				if (query !== '') {
					this.loading = true;
					this.pageCityList = []
					setTimeout(() => {
						this.loading = false;
						this.pageCityList = list.map(item => {
							item.list = item.list.filter(val=>val.cityName.toLowerCase().indexOf(query.toLowerCase()) > -1);
							return item
						}).filter(val=>val.list.length)
					}, 10);
				} else {
					this.pageCityList = list;
				}
				this.scrollTop = 0
			},
			//删除全部 删
			removeAll(){
				this.citySelectList = [];
				this.setPageCityList()
			},
			saveAll(){
				//判断 如果citySelectList为空 但是pageCityList还有值  我们则提示本地有其他数据 是否保存 以解决删除完citySelectList后不能保存的bug
				// const showModelFlag = this.citySelectList.length==0&&this.pageCityList.length>0
				// if(showModelFlag){
				// 	uni.showModal({
				// 		title:'温馨提示',
				// 		content:"系统检测到您还有其他城市授权，是否取消搜索并保存数据？",
				// 		success:({confirm})=>{
				// 			if(confirm){
				// 				this.citySelectList = this.$u.deepClone(this.pageCityList)
				// 				this.searchName = '';
				// 				this.$refs.search.modelValue = '' // 直接设置value为空没用 还需要操作子元素设置下子元素vmodel的值
				// 				this.saveCityList()
				// 			}
				// 		}
				// 	})
				// 	return false;
				// }
				// this.saveCityList()
				// this.citySelectList = this.$u.deepClone(this.pageCityList)
				// this.searchName = '';
				// this.$refs.search.modelValue = '' // 直接设置value为空没用 还需要操作子元素设置下子元素vmodel的值
				this.saveCityList()
			},
			//保存修改
			saveCityList(){
				const fn = this.option.istemp==1 ? editProductTempCity : editProductRelCity;
				let cityList = [];
				this.citySelectList.forEach(val=>{
					cityList = [...cityList,...val.list]
				})
				if(cityList.length==0){
					this.$u.toast("请至少添加一个城市")
					return false;
				}
				fn({
					productTempId:this.option.productTempId,
					productId:this.option.productId,
					cityList
				}).then(res=>{
					this.routeBack('保存成功') // 几秒后返回 在toolsmixins中定义的
				})
			},
			// 删 操作完citylist再赋值给pageCityList
			removeListItem(form){
				this.removeItem(form) // 调用addCity mixin里面的方法删除
				this.setDown() // 这里用搜索方法的原因是因为 如果直接赋值 那输入框还有值并且还能搜到数据的情况下就会出现显示错误
			},
			//编辑或者新增
			saveItemCity(form){
				this.saveCity(form) // 调用addCity mixin里面的方法操作编辑和新增
				this.setDown() // 这里用搜索方法的原因是因为 如果直接赋值 那输入框还有值并且还能搜到数据的情况下就会出现显示错误
			},
			//把操作后的citySelectlist赋值给pageCity展示
			setPageCityList(){
				this.pageCityList = [...this.citySelectList] // 拷贝citySelectList
				console.log(this.citySelectList,this.pageCityList)
			}
			
		},
	}
</script>
<style lang="scss">
	/deep/.u-index-bar__index{
		color: #999999;
	}
</style>
<style lang="scss" scoped>
.add-city-search-box{
	background-color: var(--background-color);
	left: 0;
	right: 0;
	z-index: 55;
}
.bg-white{
	background-color: white;
	border-radius: 0 0 26rpx 26rpx;
}
.fixed-top-empty{
	padding-top: 160rpx;
}
</style>
